<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>客单管理</span>
        <span class="cardsize">共{{ pageData.total }}单</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      inline
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item>
        <el-input
          style="width: 300px"
          v-model="pageData.keywords"
          placeholder="请输入标识/手机号"
          clearable
          @clear="searchInfo"
        >
          <template #append>
            <el-button @click="searchInfo">搜索</el-button>
          </template>
        </el-input>
      </el-form-item>
      <!-- <el-form-item>
				<el-select v-model="pageData.region" placeholder="服务类型">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item> -->
      <el-form-item>
        <el-select
          v-model="pageData.studentGaoKaoYear"
          placeholder="高考年份"
          clearable
          @change="searchInfo"
        >
          <el-option
            v-for="item in gaoKaoYear"
            :key="item.val"
            :label="item.name"
            :value="item.val"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pageData.pid"
          placeholder="省份"
          clearable
          @change="searchInfo"
        >
          <el-option
            v-for="item in province"
            :key="item.val"
            :label="item.name"
            :value="item.val"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pageData.userType"
          placeholder="用户类型"
          clearable
          @change="searchInfo"
        >
          <el-option label="志愿卡" value="1" />
          <el-option label="升学卡" value="2" />
          <el-option label="体验卡" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pageData.orderTime"
          placeholder="购买时间"
          clearable
          @change="searchInfo"
        >
          <el-option label="今天" value="1" />
          <el-option label="昨天" value="2" />
          <el-option label="7天" value="3" />
          <el-option label="30天" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pageData.expressStatus"
          placeholder="状态"
          clearable
          @change="searchInfo"
        >
          <el-option label="待发货" value="0" />
          <el-option label="已发货" value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
      :data="orderListArr"
      style="width: 100%"
      class="margintop"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
      stripe
      v-loading="isLoading"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column prop="orderNo" width="270" label="订单编号" />
      <el-table-column prop="bigTypeName" label="服务类型" />
      <el-table-column prop="serviceName" label="服务名称" width="110" />
      <el-table-column prop="studentMobile" label="手机号" width="110">
        <template #default="scope">
          <!-- <el-button link type="primary" size="small" @click="updateChange(scope.row)">
						{{ scope.row.studentMobile }}
					</el-button> -->
          <div
            class="curr"
            style="color: #004cf7"
            @click="updateChange(scope.row)"
          >
            {{ scope.row.studentMobile }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="110" />
      <!-- <el-table-column prop="teatcher" label="来源渠道" /> -->
      <el-table-column prop="studentGaoKaoYear" label="高考年份" />
      <el-table-column prop="gkaProvinceName" label="省份" />
      <!-- <el-table-column prop="source" label="用户类型" /> -->
      <el-table-column prop="realPrice" label="商品价格" />
      <el-table-column prop="kdfPrice" label="客单费" width="100" />
      <el-table-column prop="creationTime" label="购买时间" width="160" />
      <el-table-column prop="expressStatus" label="状态">
        <template #default="scope">
          <!-- 自营服务类型 {isNeedAddress-是否需要发货 0-不需要 1-需要} {expressStatus-物流状态 0待确认 1 已发货 2已完成 3-已完成} -->
          <div v-if="scope.row.bigTypeName == '自营服务'">
            <!-- 需要发货 -->
            <el-button
              v-if="scope.row.isNeedAddress == 1"
              link
              type="primary"
              size="small"
              :disabled="scope.row.expressStatus == 2"
              @click.prevent="deliverChange(scope.row)"
            >
              {{
                scope.row.expressStatus == 0
                  ? '待确认'
                  : scope.row.expressStatus == 1
                    ? '已发货'
                    : '已完成'
              }}
            </el-button>

            <!-- 不需要发货 -->
            <el-button
              v-else
              link
              type="primary"
              size="small"
              :disabled="scope.row.expressStatus == 2"
              @click.prevent="deliverChange(scope.row)"
            >
              {{ scope.row.expressStatus == 0 ? '待确认' : '已完成' }}
            </el-button>
          </div>
          <!-- '体验卡', '志愿卡', '升学卡'，这三类卡暂时先全部写成已完成 -->
          <div
            v-else-if="
              ['体验卡', '志愿卡', '升学卡'].includes(scope.row.bigTypeName)
            "
          >
            已完成
          </div>
          <!-- 专家填报类型 orderStatus 订单状态 0-进行中 1-待填报 3-已完成 -->
          <div v-else>
            {{
              scope.row.orderStatus == 0
                ? '进行中'
                : scope.row.orderStatus == -1
                  ? '待填报'
                  : '已完成'
            }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column fixed="right" label="物流状态" align="center">
				<template #default='scope'>
					<el-button link type="primary" size="small" @click.prevent="deliverChange()">
						{{scope.row.expressStatus == 0 ? '待发货':'已发货'}}
					</el-button>
				</template>
			</el-table-column> -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            v-if="scope.row.isNeedAddress == 1"
            link
            type="primary"
            size="small"
            @click.prevent="addressChange()"
          >
            查物流
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column fixed="right" label="业务员" width="100" align="center">
				<template #default>
				</template>
			</el-table-column> -->
    </el-table>
    <div class="right" style="margin-top: 20px">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="getUserOrderList"
          @current-change="getUserOrderList"
        />
      </el-config-provider>
    </div>
  </el-card>
  <deliver ref="delivers" @refreshUserList="searchInfo"></deliver>
  <addressInfo ref="address"></addressInfo>
  <updateUser
    :province="province"
    :gaoKaoYear="gaoKaoYear"
    ref="update"
    @refreshUserList="searchInfo"
  ></updateUser>
</template>
<script setup>
import { ref, reactive } from 'vue';
import deliver from './module/deliver.vue';
import addressInfo from './module/addressInfo.vue';
import updateUser from '../userList/module/upadateUser.vue';
import {
  userOrderList,
  userListFilter,
  userOrderStatus,
} from '@/api/manage/manage.js';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ElMessage, ElMessageBox } from 'element-plus';

const delivers = ref(null);
const address = ref(null);
const update = ref(null);

const pageData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});
const gaoKaoYear = ref([]); // 高考年份
const province = ref([]); // 省份

const isLoading = ref(false); // 是否正在加载
const orderListArr = ref([]); // 测评列表数组

function searchInfo() {
  getUserOrderList();
}

getUserOrderList();
// 获取客单列表
function getUserOrderList() {
  Object.keys(pageData).forEach(function (key) {
    if (pageData[key] === '') {
      delete pageData[key];
    }
  });

  isLoading.value = true;
  userOrderList(pageData)
    .then((res) => {
      isLoading.value = false;
      orderListArr.value = res.data.list;
      pageData.total = res.data.pageTotal;
    })
    .catch(() => {
      isLoading.value = false;
    });
}

userSearch();
// 筛选条件
function userSearch() {
  userListFilter().then((res) => {
    gaoKaoYear.value = res.data[0].data;
    province.value = res.data[2].data;
  });
}

function addressChange() {
  // address.value.openChange()
  window.open('https://www.kuaidi100.com/all/index.shtml');
}

function deliverChange(val) {
  let expressStatus = val.expressStatus;
  let isNeedAddress = val.isNeedAddress;

  // if (val.bigTypeName == '自营服务') {
  if (expressStatus == 0 && isNeedAddress == 1) {
    // 需要发货，打开物流窗口
    delivers.value.openChange(val);
  } else {
    // 不需要发货或者 expressStatus != 0 完成订单
    ElMessageBox.confirm('确认完成订单吗？').then(() => {
      const data = {
        status: 2,
        field: 'expressStatus',
        orderNo: val.orderNo,
      };
      userOrderStatus(data).then(() => {
        ElMessage({
          type: 'success',
          message: '已完成',
        });

        searchInfo();
      });
    });
  }
}

function updateChange(val) {
  let data = {
    pid: val.gkaProvinceNumId,
    phone: val.studentMobile,
  };
  update.value.openChange(data);
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .cardsize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
